<template>
	<view class="content">
		
		
		<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
		<swiper @change="change" class="swiper-content" >
			<swiper-item class="swiperitem-content" v-for="(item,index) in category" :key="index">
				<scroll-view scroll-y class="sv" >
					<view class="nav_item flex">
						<image :src="item.src" mode="" class="img"></image>
						<view class="jia_list">
							<p>{{item.text1}}</p>
							<h2>{{item.num}}</h2>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper><!--轮播图-->
		<ul class="shou flex">
			<li v-for="(item,index) in list" :key="index"  class="flex" v-if="currentindex==index">
				<image :src="item.src" mode="" class="img1"></image>
				<p>{{item.title}}</p>
			</li>
		</ul>
	</view>
</template>

<script>
	
	export default{
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data(){
			return{
				isActive: 0,
				index: 0,
				currentindex: 0,
				category:[
					{id:'1',text1:'加油金(元)',num:'0.00',src:'/static/images/jiayou (2).gif'},
					{id:'2',text1:'津贴(元)',num:'0.00',src:'/static/images/jiayou (3).gif'},
				],
				list:[
					{id:'1',src:'/static/images/jiayou (1).gif',title:'收支明细'},
					{id:'2',src:'/static/images/jiayou1.gif'}
				]
				
			
			}
		},
		
		methods:{
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
				getScrollW() {
					const query = uni.createSelectorQuery().in(this);
					query.select('.tab-scroll').boundingClientRect(data => {
						// 拿到 scroll-view 组件宽度
						this.contentScrollW = data.width
					}).exec();
					query.selectAll('.tab-scroll_item').boundingClientRect(data => {
						let dataLen = data.length;
						for (let i = 0; i < dataLen; i++) {
							//  scroll-view 子元素组件距离左边栏的距离
							this.category[i].left = data[i].left;
							//  scroll-view 子元素组件宽度
							this.category[i].width = data[i].width
						}
					}).exec()
				},
				// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
				chenked(index) {
					this.isActive = index;
					this.scrollLeft = 0;
					for (let i = 0; i < index - 1; i++) {
						this.scrollLeft += this.category[i].width
					};
				},
				// swiper滑动时，获取其索引，也就是第几个
				change(e) {
					const {
						current
					} = e.detail;
					this.currentindex = current;
					
				},
				

		}
	}
</script>


<style lang="scss">
	*{margin: 0;padding: 0;}
	
	
	$color:#ecc89d;
	$color1:#996f4a;
	$color2:#713a11;
	$border-radius:20rpx;
	.flex{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	//滑动
	page{height: 100%;display: flex;background-color: #FFFFFF;}
	.img1{display: block;width: 40rpx;height: 40rpx; }
	.img{display: block;height:260rpx;width:98%;}
	.content{display: flex;flex-direction: column;width: 100%;flex: 1;
		
	}
	.nav_item{position: relative;width: 98%;margin: 0 auto;}
	.jia_list{position: absolute;left:50rpx;top:50rpx;}
	.jia_list p{font-size: 25rpx;color: $color1;}
	.jia_list h2{font-size: 40rpx;color: $color2;}
	.active {position: relative;font-weight: 600;}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {display: none}
</style>